<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
        canvas: 画布 本质上是个图片 可以自己动的图片；
            可用于做游戏，图标，大数据可视化等复杂效果；

        canvas出现的原因：
            当DOM元素很多的时候，渲染性能会很差 所以 canvas 可以优化 dom 渲染的问题；

        canvas是什么：
            是一个标签 ES6新出的标签 本质上就跟一张图片一样； 

            canvas 标签 必须内联设置 宽高 以此来对画布的坐标系进行定位；
            <canvas id="canvas" width="800" height="800"></canvas>

            内联宽高 表示 元素的实际尺寸 使得绘制位置跟实际尺寸相对应

            但css中设置的宽高 只是渲染在页面中的尺寸 跟实际尺寸没有关系； 它可能会被拉伸或者压缩；

        如何使用 canvas:
            通过 js 控制；
            1.选中元素；
            2.获取绘制环境: let ctx = canvas.getContext('2d') 获取平面绘制环境；

            3.描述绘制路径；
                moveTo(x,y) 开始位置
                lineTo(x,y) 结束位置
                rect(x,y,w,h) 矩形
                arc(x,y,r,sArg,eArg,counterclockwise) 画圆 圆心 半径 始末角位置 顺时针还是逆时针 fasle 顺 true 逆
            4.描述绘制方法;
                stroke() 画线条
                fill() 填充
                strokeRect() 画矩形
                fillRect() 填充矩形
                arc() 画圆形 或 圆弧

                strokeStyle 线条颜色
                fillStyle 填充色
                lineWidth 线条宽度

            5.清除区域
                clearRect(x,y,w,h)

            画矩形：
            
                ctx.beginPath() 开始此次绘制
                ctx.rect(顶点横坐标，顶点纵坐标，宽度，高度) 绘制路径
                ctx.stroke() 绘制方法 画线条
                ctx.fill() 绘制方法 填充
                ctx.closePath() 结束此次绘制

            画圆形：
                ctx.beginPath() 开始此次绘制
                ctx.arc(x,y,r,start,end,false) 绘制路径
                ctx.stroke() 绘制方法 画线条
                ctx.fill() 绘制方法 填充
                ctx.closePath() 结束此次绘制

            绘制图片：
                let img = new Image() 创建图片
                img.src = 'path' 图片路径
                img.onload = function (){
                  ctx.drawImage(img,x,y,w,h) 图片对象 起始位置 尺寸
                } 图片加载

                ctx.drawImage(img对象,x,y,w,h)

            裁剪图片：
                在原始图片中裁剪一个矩形区域 渲染出来
                ctx.drawImage(img,dx,dy,dw,dh,x,y,w,h)
                原始图片对象 裁剪位置 裁剪尺寸 显示位置 显示尺寸
     -->
</body>

</html>